<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC Client Test</title>
</head>
<body>
    <h1>WebRTC Client Test</h1>
    <video id="localVideo" autoplay playsinline muted></video>
    <video id="remoteVideo" autoplay playsinline></video>
    <button id="startButton">Start</button>
    <button id="callButton" disabled>Call</button>
    <button id="hangupButton" disabled>Hang Up</button>

    <script>
        let localStream;
        let pc;
        const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };

        const localVideo = document.getElementById('localVideo');
        const remoteVideo = document.getElementById('remoteVideo');
        const startButton = document.getElementById('startButton');
        const callButton = document.getElementById('callButton');
        const hangupButton = document.getElementById('hangupButton');

        startButton.onclick = async () => {
            localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
            localVideo.srcObject = localStream;
            callButton.disabled = false;
        };

        callButton.onclick = async () => {
            pc = new RTCPeerConnection(configuration);
            localStream.getTracks().forEach(track => pc.addTrack(track, localStream));

            pc.ontrack = event => {
                remoteVideo.srcObject = event.streams[0];
            };

            pc.onicecandidate = event => {
                if (event.candidate) {
                    console.log('ICE Candidate:', event.candidate);
                }
            };

            const offer = await pc.createOffer();
            await pc.setLocalDescription(offer);
            console.log('Offer:', offer);

            // Simulate signaling by directly setting the remote description
            const answer = new RTCSessionDescription({ type: 'answer', sdp: offer.sdp });
            await pc.setRemoteDescription(answer);
            console.log('Answer:', answer);

            hangupButton.disabled = false;
        };

        hangupButton.onclick = () => {
            pc.close();
            pc = null;
            hangupButton.disabled = true;
            callButton.disabled = true;
        };
    </script>
</body>
</html>